import React from "react";
import { List, Tag, Button, Space } from "antd";
import { ClockCircleOutlined } from "@ant-design/icons";
import type { ExamInfo } from "../../../../../types";

const CourseExams: React.FC = () => {
  const mockExams: ExamInfo[] = [
    {
      id: "1",
      name: "期中考试",
      courseId: "c1",
      startTime: "2024-04-15 14:00",
      endTime: "2024-04-15 16:00",
      duration: 120,
      totalScore: 100,
      status: "upcoming",
    },
    {
      id: "2",
      name: "期末考试",
      courseId: "c1",
      startTime: "2024-06-20 09:00",
      endTime: "2024-06-20 11:00",
      duration: 120,
      totalScore: 100,
      status: "upcoming",
    },
  ];

  const getStatusTag = (status: ExamInfo["status"]) => {
    switch (status) {
      case "upcoming":
        return <Tag color="warning">未开始</Tag>;
      case "ongoing":
        return <Tag color="processing">进行中</Tag>;
      case "completed":
        return <Tag color="success">已完成</Tag>;
      default:
        return null;
    }
  };

  return (
    <List
      itemLayout="horizontal"
      dataSource={mockExams}
      renderItem={(item) => (
        <List.Item
          actions={[
            <Button key="view" type="link">
              查看详情
            </Button>,
          ]}
        >
          <List.Item.Meta
            title={item.name}
            description={
              <Space>
                {getStatusTag(item.status)}
                <span>
                  <ClockCircleOutlined /> 考试时间：{item.startTime}
                </span>
                <span>时长：{item.duration}分钟</span>
              </Space>
            }
          />
        </List.Item>
      )}
    />
  );
};

export default CourseExams;
